{% block sw_media_field %}
<div class="sw-media-field">
    {% block sw_media_field_label %}
    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
    <label
        v-if="showLabel"
        class="sw-media-field__label"
    >
        <slot name="label">
            {{ label }}
        </slot>
    </label>
    {% endblock %}

    {% block sw_media_field_input %}
    <div
        class="sw-media-field__input-container"
        :class="mediaFieldClasses"
    >
        {% block sw_media_field_preview %}
        <sw-media-media-item
            v-if="mediaEntity"
            class="sw-media-field__media-list-item sw-media-field__input"
            :item="mediaEntity"
            :is-list="true"
            :show-context-menu-button="false"
            :editable="false"
        />
        <div
            v-else
            class="sw-media-field__empty-preview sw-media-field__input"
        ></div>
        {% endblock %}

        {% block sw_media_field_toggle_button %}
        <mt-button
            class="sw-media-field__toggle-button"
            square
            :disabled="disabled"
            variant="secondary"
            @click="onTogglePicker"
        >
            {% block sw_media_field_media_icon %}
            <mt-icon name="regular-image" />
            {% endblock %}

            {% block sw_media_field_media_popover %}
            <sw-popover
                v-if="showPicker"
                :z-index="1100"
                popover-class="sw-media-field__expanded-content"
                class="sw-media-field__popover"
            >
                <div @click.stop>
                    {% block sw_media_field_action_bar %}
                    <div class="sw-media-field__actions_bar">
                        {% block sw_media_field_action_bar_button_toggle %}
                        <mt-button
                            class="sw-media-field__action-button"
                            variant="secondary"
                            @click="toggleUploadField"
                        >
                            <mt-icon
                                class="sw-media-field__icon-add"
                                name="regular-plus"
                                size="16px"
                            />
                            {{ toggleButtonLabel }}
                        </mt-button>
                        {% endblock %}

                        {% block sw_media_field_action_bar_button_unlink %}
                        <mt-button
                            v-if="mediaId"
                            class="sw-media-field__action-button is--remove"
                            variant="secondary"
                            @click="removeLink"
                        >
                            <mt-icon
                                class="sw-media-field__icon-remove"
                                name="regular-times-circle-s"
                                size="16px"
                            />
                            {{ $tc('global.sw-media-field.labelUnlink') }}
                        </mt-button>
                        {% endblock %}
                    </div>
                    {% endblock %}

                    {% block sw_media_field_upload_component %}
                    <sw-upload-listener
                        :upload-tag="uploadTag"
                        auto-upload
                        @media-upload-finish="exposeNewId"
                    />

                    <sw-media-upload-v2
                        v-if="showUploadField"
                        variant="regular"
                        :file-accept="fileAccept"
                        :default-folder="defaultFolder"
                        :allow-multi-select="false"
                        :upload-tag="uploadTag"
                        :disabled="disabled"
                    />
                    {% endblock %}

                    <div
                        v-else
                        class="sw-media-field__media-selection"
                    >
                        {% block sw_media_field_search_field %}
                        <sw-simple-search-field
                            v-model:value="searchTerm"
                            @search-term-change="onSearchTermChange"
                        />
                        {% endblock %}

                        {% block sw_media_field_media_list %}
                        <sw-loader
                            v-if="isLoadingSuggestions"
                            class="sw-media-field__picker-loader"
                        />

                        <ul
                            v-else
                            class="sw-media-field__suggestion-list"
                        >
                            <li
                                v-for="suggestion in suggestedItems"
                                :key="suggestion.id"
                                class="sw-media-field__suggestion-list-entry"
                            >
                                {% block sw_media_field_suggestion_preview %}
                                <sw-media-media-item
                                    class="sw-media-field__media-list-item"
                                    :item="suggestion"
                                    :is-list="true"
                                    :show-context-menu-button="false"
                                    @media-item-click="mediaItemChanged(suggestion.id)"
                                />
                                {% endblock %}
                            </li>
                        </ul>
                        {% endblock %}

                        <sw-pagination
                            v-bind="{ page, limit, total }"
                            :total-visible="4"
                            :steps="[5]"
                            @page-change="onPageChange"
                        />
                    </div>
                </div>
            </sw-popover>
            {% endblock %}
        </mt-button>
        {% endblock %}
    </div>
    {% endblock %}
</div>
{% endblock %}
